<template>
  <div id="ConentCom" ref="init" @scroll.passive="getScroll($event)">
    <!-- 接收 -->
    <router-view v-slot="{  Component  }">
      <transition :name="route.meta.transition || 'fade'">
        <component :is="Component" />
      </transition>
    </router-view>
    <!-- 置顶图标 -->
    <div class="upicon" @click="upTop" v-if="isShow">
      <i class="icon el-icon-upload2"></i>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  name: "ConentCom",
  props: {},
  data() {
    return {
      scrollTop:0,
      clientHeight:0,
      scrollHeight:0,
      isShow:true,
    };
  },
  computed: {},
  methods: {
    // 获取卷去高度
    getScroll(e) {
      // console.log(e.target.scrollTop + "视图高度" + e.target.scrollHeight);
      // console.log(e.target.clientHeight +" " +e.target.scrollTop +" " +e.target.scrollHeight);
      // console.log(this.isShow)
      this.scrollTop = e.target.scrollTop
      this.changShow(e.target.clientHeight,e.target.scrollTop)
    },
    // 判断高度时候一个内容高度控制隐藏和消失
    changShow(clientHeight,scrollTop){
      if(scrollTop>clientHeight){
        this.isShow = true
      }else{
        this.isShow = false
      }
    },
    // 置顶
    upTop(){
      // this.$refs.init.scrollTop = 0
      var uniformity = Math.ceil(this.scrollTop / 50)
      var time = setInterval(()=>{
        if(this.$refs.init.scrollTop<=0){
          this.$refs.init.scrollTop = 0
          clearInterval(time)
        }else{
          this.$refs.init.scrollTop =Math.ceil(this.$refs.init.scrollTop - uniformity) 
        }
      },10)
    },
    ...mapMutations(['changerouter'])
  },
  watch:{
    $route(from){
      console.log("当前路径",from.path)
      if(from.path=='/login'){
        this.changerouter(false)
      }else{
        // this.isShow=true
        this.changerouter(true)
      }
    }
  },
  created() {},
  mounted() {
    this.scrollTop = this.$refs.init.scrollTop;
    this.clientHeight=this.$refs.init.clientHeight,
    this.scrollHeight=this.$refs.init.scrollHeight,
    this.changShow(this.$refs.init.scrollHeight,this.$refs.init.scrollTop)
  },
};
</script>
<style lang="scss" scoped>
#ConentCom {
  overflow: scroll;
  height: calc(100% - 90px);
  .upicon{
    position: fixed;
    bottom: 7%;
    right: 9%;
    background: white;
    border: 1px solid #EBEEF5;
    box-shadow: 0 0 5px 2px #E4E7ED;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #409EFF;
  }
}
</style>
